﻿@model IEnumerable<ShivamEMR.Model.Domain.PatientDomain.Patient>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_UpdateLayout.cshtml";
}
@section CustomHeader
{
    <script type="text/javascript">
        var linkObj;
        $(function () {

            $("#gtheme").click(function () {
                $("#themeWrap").toggle("slow");
                $(this).toggle("slow");

            });
            $('#updateDialog').dialog({
                autoOpen: false,
                width: 1000,
                resizable: false,
                modal: true,
                buttons: {
                    "Update": function () {
                        $("#update-message").html(''); //make sure there is nothing on the message before we continue                         
                        $("#updatePForm").submit();
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
            $('#DetailDialog').dialog({
                autoOpen: false,
                width: 1000,
                resizable: false,
                modal: true,
                buttons: {
                    "Ok": function () {
                        $(this).dialog("close");
                    }
                }
            });



            function updateSuccess() {
                if ($("#update-message").html() == "True") {
                    //NOTE: Here you would normally call the service that removes the car from the database
                    var grid = $("#cars-grid").data("kendoGrid");
                    var dataItem = grid.dataItem($(this).closest("tr"));
                    grid.dataSource.update(dataItem);
                    //            //we update the table's info
                    //            var parent = linkObj.closest("tr");
                    //            parent.find(".carName").html($("#Name").val());
                    //            parent.find(".carDescription").html($("#Description").val());
                    //now we can close the dialog
                    $('#updateDialog').dialog('close');
                    //twitter type notification
                    $('#commonMessage').html("Update Complete");
                    $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
                }
                else {
                    $("#update-message").show();
                }
            }
        });
    </script>
    <link href="@Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet"/>
    <link href="@Url.Content("~/Content/kendo.default.min.css")" rel="stylesheet"/>
    <link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="stylesheet"/>
    <link href="@Url.Content("~/Content/demo.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Content/kendo.all.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Demo.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/Demo1.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //$("a").button();
            $("#cars-grid").kendoGrid({
                pageable: true,
                sortable: true,
                height: 500,
                groupable: true,
                filterable: true,
                dataSource: {
                    transport: {
                        read: "/Patient/Patient",
                        dataType: "json"
                    },
                    pageSize: 5
                },
                rowTemplate: kendo.template($("#CustomeTemplate").html()),
                dataBound: function (e) {
                    $(".delete-link").click(function (e) {
                        e.preventDefault();
                        if (confirm("Do you want to delete this ?")) {
                            //NOTE: Here you would normally call the service that removes the car from the database
                            var viewUrl = $(this).attr("href");
                            var obj = $(this);
                            $.post(viewUrl, function (data) {

                                var grid = $("#cars-grid").data("kendoGrid");
                                var dataItem = grid.dataItem($(obj).closest("tr"));
                                grid.dataSource.remove(dataItem);
                            });



                        }
                        return false;
                    });

                    $(".edit-link").click(function (e) {
                        e.preventDefault();
                        //change the title of the dialgo
                        linkObj = $(this);
                        var dialogDiv = $('#updateDialog');
                        var viewUrl = linkObj.attr('href');
                        $.get(viewUrl, function (data) {
                            dialogDiv.css("width", "100%");
                            dialogDiv.css("height", "400px");
                            dialogDiv.html(data);
                            //validation
                            var $form = $("#updatePForm");
                            // Unbind existing validation
                            $form.unbind();
                            $form.data("validator", null);
                            // Check document for changes
                            $.validator.unobtrusive.parse(document);
                            // Re add validation with changes
                            $form.validate($form.data("unobtrusiveValidation").options);
                            //open dialog
                            dialogDiv.dialog('open');
                        });
                        return false;


                    });
                    $(".details-link").click(function (e) {
                        e.preventDefault();
                        //change the title of the dialgo
                        linkObj = $(this);
                        var dialogDiv = $('#DetailDialog');
                        var viewUrl = linkObj.attr('href');
                        $.get(viewUrl, function (data) {

                            dialogDiv.html(data);

                            dialogDiv.dialog('open');
                        });
                        return false;


                    });
                }
            });

        });

    </script>
}
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div id="commonMessage">
</div>
<div id="themeWrap" style="">
    <p class="choose-theme">
        Choose Theme:</p>
    <ul id="themeChooser">
        <li></li>
    </ul>
</div>
<div style="left: 0px; padding: 10px; width: 20px;" id="gtheme" class="accent-bg">
    Theme</div>
<div width="90%" id="exampleWrap">
    <table id="cars-grid">
        <thead>
            <tr>
                <th data-field="FirstName">
                    FirstName
                </th>
                <th data-field="MiddleName">
                    MiddleName
                </th>
                <th data-field="LastName">
                    LastName
                </th>
                <th data-field="DateOfBirth">
                    DateOfBirth
                </th>
                <th data-field="SexID">
                    SexID
                </th>
                <th data-field="PictureID">
                    PictureID
                </th>
                <th data-field="PersonAccountID">
                    PersonAccountID
                </th>
                <th data-field="PersonStatusID">
                    PersonStatusID
                </th>
                <th data-field="FullName">
                    FullName
                </th>
                <th>
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="6">
                    Loading...
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script id="CustomeTemplate" type="text/x-kendo-template">    
    <tr>
	      
		
      
		
        <td>
          #= FirstName #
        </td>
		
        <td>
          #= MiddleName #
        </td>
		
        <td>
          #= LastName #
        </td>
		
        
		
        <td>
          #= DateOfBirth #
        </td>
	
        <td>
          #= SexID #
        </td>
		
       
        <td>
          #= PictureID #
        </td>
		
        <td>
          #= PersonAccountID #
        </td>
		
        <td>
          #= PersonStatusID #
        </td>
		
        <td>
          #= FullName #
        </td>
		
<td>
		 <a href="@Url.Action("DeleteConfirmed")/#= ID #" class="delete-link">Delete</a>    
		  <a href="@Url.Action("Edit")/#= ID #" class="edit-link">Edit</a>           
		   <a href="@Url.Action("Details")/#= ID #" class="details-link">Details</a>                  
        </td>
        
    </tr>
       
    
            

</script>
<div id="updateDialog" title="Update Patient">
</div>
<div id="DetailDialog" title="Patient">
</div>
<script>


    $("#themeChooser").themeChooser();


            



</script>
